<template>
  <div>
    <Loading v-if="loading" />
    <h3 v-else>{{ title }}</h3>
    <BookList :list="books" v-if="books.length" />
    <h1>{{ message }}</h1>
    <!-- <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :current-page="pageNum"
      :page-sizes="[2, 10, 20, 40]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->
  </div>
</template>

<script setup lang="ts">
import BookList from '@/components/BookList.vue'
import Loading from '@/components/Loading.vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { onBeforeRouteUpdate } from 'vue-router'
import { getBook1, getBook2 } from '@/api/api'
const route = useRoute()
console.log(route)
const title = ref('你怎么不出来')
const books = ref<IBooks[]>([])
const message = ref('')
const loading = ref(false)
// let total = 0
// let pageNum = 0
// let pageSize = 0

interface IBooks {
  author: string
  bigImgUrl: string
  bookConcern: null
  brief: null
  discount: number
  id: number
  imgUrl: string
  inventory: number
  price: number
  publishDate: null
  title: string
}

const getBooks = async () => {
  message.value = ''
  console.log(route.fullPath)

  if (route.fullPath.indexOf('category') !== -1) {
    const { data } = await getBook1(route.fullPath)
    books.value = data
    console.log(data)
  } else {
    console.log(route.query)
    const { data } = await getBook2()
    books.value = data
    console.log(data)
  }
  loading.value = false
  if (books.value.length === 0) {
    message.value = '当前分类下没有图书'
  }
}
getBooks()

onBeforeRouteUpdate(async (to, from) => {
  console.log(to.fullPath)
  console.log(from.fullPath)
  if (to.fullPath !== from.fullPath) {
    await getBooks()
  }
})
//当修改了每页显示的条数时，重新请求数据
// const handleSizeChange = (selectedSize: number) => {
//   pageSize = selectedSize
//   getBooks()
// }
//当用户切换而选择了某一页时，重新请求数据
// const handleCurrentChange = (currentPage: number) => {
//   pageNum = currentPage
//   getBooks()
// }
</script>

<style scoped></style>
